<div class="card card-accent-info">
  <div class="card-body">
    <h4 class="card-title">Use (chartInit) to get echartsInstance</h4>
    <div class="mt-4">
      <tabset>
        <tab heading="demo">
          <div class="row">
            <div class="col-md-6">
              <markdown>
                Please refer to [ECharts documentation](http://echarts.baidu.com/api.html#echartsInstance) for details about `echartsInstance`

                -----

                Check console after button clicked:
              </markdown>
              <p><button class="btn btn-outline-primary" (click)="getWidth()">getWidth()</button></p>
              <p><button class="btn btn-outline-primary" (click)="getHeight()">getHeight()</button></p>
              <p><button class="btn btn-outline-primary" (click)="getDom()">getDom()</button></p>
              <p><button class="btn btn-outline-primary" (click)="getOption()">getOption()</button></p>
              <p><button class="btn btn-outline-danger" (click)="clear()">clear()</button></p>
            </div>
            <div class="col-md-6">
              <div echarts [options]="options" (chartInit)="onChartInit($event)" class="demo-chart"></div>
            </div>
          </div>
        </tab>
        <tab heading="html">
          <markdown [data]="demo_html | language: 'html'"></markdown>
        </tab>
        <tab heading="component">
          <markdown [data]="demo_ts | language: 'typescript'"></markdown>
        </tab>
      </tabset>
    </div>
  </div>
</div>
  